<template>
  <div>
    <Table border :columns="columns" :data="familyList">
      <template slot-scope="{ row }" slot="DF003">
        <span v-if="row.DF003 === '10301001'">男</span>
        <span v-if="row.DF003 === '10301002'">女</span>
      </template>
      <template slot-scope="{ row }" slot="DF005">
        <div v-for="item in guanxi" v-bind:key="item.id" v-if="item.id === row.DF005">{{ item.name }}</div>
      </template>
      <template slot-scope="{ row }" slot="DF006">
        <div v-for="item in renyuanleibie" v-bind:key="item.id" v-if="item.id === row.DF006">{{ item.name }}</div>
      </template>
      <template slot-scope="{ row }" slot="DF007">
        <div v-for="item in minzu" v-bind:key="item.id" v-if="item.id === row.DF007">{{ item.name }}</div>
      </template>
      <template slot-scope="{ row }" slot="DF010">
        <div v-for="item in laodongnengli" v-bind:key="item.id" v-if="item.id === row.DF010">{{ item.name }}</div>
      </template>
      <template slot-scope="{ row }" slot="DF009">
        <div v-for="item in shenghuozilinengli" v-bind:key="item.id" v-if="item.id === row.DF009">{{ item.name }}</div>
      </template>
      <template slot-scope="{ row }" slot="DF011">
        <div v-for="item in zilinengli" v-bind:key="item.id" v-if="item.id === row.DF011">{{ item.name }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" style="margin-right: 5px" :disabled="paramsData.operation === '2'" @click="updateFamily(row, index)">编辑</Button>
        <Button type="error"  :disabled="paramsData.operation === '2'" @click="deleteFamily(row, index)">删除</Button>
      </template>
    </Table>
    <Button  :disabled="paramsData.operation === '2'" style="width: 90%; margin: 10px 5%;" type="dashed" @click="addFamily">添加成员</Button>
    <Modal v-model="familyModal" width="1000" title="添加家庭成员" @on-ok="addFamilyOk()"
           @on-cancel="familyModal = false">
      <Form ref="familyInfo" :model="familyInfo" label-position="right" :label-width="100">
        <Row :gutter="24">
          <Col span="12">
            <FormItem label="身份证号" prop="DF001">
              <Input @on-change="checkCardno(familyInfo.DF001)" maxlength="18" v-model="familyInfo.DF001"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="姓名" prop="DF002">
              <Input v-model="familyInfo.DF002"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="性别" prop="DF003">
              <Select disabled v-model="familyInfo.DF003" clearable filterable>
                <Option value="10301001">男</Option>
                <Option value="10301002">女</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="出生日期" prop="DF004">
              <Input disabled v-model="familyInfo.DF004"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="与申请人关系" prop="DF005">
              <Select v-model="familyInfo.DF005" clearable filterable>
                <Option v-for="item in guanxi" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="人员类别" prop="DF006">
              <Select v-model="familyInfo.DF006" clearable filterable>
                <Option v-for="item in renyuanleibie" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="民族" prop="DF007">
              <Select v-model="familyInfo.DF007" clearable filterable>
                <Option v-for="item in minzu" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="户籍地址" prop="DF008">
              <Input v-model="familyInfo.DF008"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="生活自理能力" prop="DF009">
              <Select v-model="familyInfo.DF009" clearable filterable>
                <Option v-for="item in shenghuozilinengli" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="劳动能力" prop="DF010">
              <Select v-model="familyInfo.DF010" clearable filterable>
                <Option v-for="item in laodongnengli" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="生活自理能力类型" prop="DF011">
              <Select v-model="familyInfo.DF011" clearable filterable>
                <Option v-for="item in zilinengli" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="是否申请特困救助" prop="DF012">
              <Select v-model="familyInfo.DF012" clearable filterable>
                <Option value="10203002">否</Option>
                <Option value="10203001">是</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>

        <Button type="primary" @click="addCanjiList">添加残疾信息</Button>
        <Table style="margin-top: 10px" :columns="canjicolumns" :data="canjiList">
          <template slot-scope="{ row }" slot="canjiState">
            <Select v-model="row.canjiState" transfer clearable filterable>
              <Option v-for="item in canjileixing" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
          </template>
          <template slot-scope="{ row }" slot="canjiLevel">
            <Select v-model="row.canjiLevel" transfer clearable filterable>
              <Option v-for="item in canjidengji" v-bind:key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" style="margin-right: 5px" @click="addCanji(row, index)">确定</Button>
            <Button type="error" @click="deleteCanji(row, index)">删除</Button>
          </template>
        </Table>

        <Button style="margin-top: 20px" type="primary" @click="addShouruList">添加收入信息</Button>
        <Table style="margin-top: 10px" :columns="shourucolumns" :data="shouruList">
          <template slot-scope="{ row }" slot="shouruState">
            <Select v-model="row.shouruState" transfer clearable filterable>
              <OptionGroup  v-for="item in shouruleixing" v-bind:key="item.id" :label="item.name">
                <Option v-for="temp in item.dataList" v-bind:key="temp.id" :value="temp.id">{{ temp.name }}</Option>
              </OptionGroup>
            </Select>
          </template>
          <template slot-scope="{ row }" slot="shouruMoney">
            <Input v-model="row.shouruMoney"></Input>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" style="margin-right: 5px" @click="addShouru(row, index)">确定</Button>
            <Button type="error" @click="deleteShouru(row, index)">删除</Button>
          </template>
        </Table>

        <Button style="margin-top: 20px" type="primary" @click="addZhichuList">添加支出信息</Button>
        <Table style="margin-top: 10px" :columns="zhichucolumns" :data="zhichuList">
          <template slot-scope="{ row }" slot="zhichuState">
            <Select v-model="row.zhichuState" transfer clearable filterable>
              <Option v-for="temp in zhuchuleixing" v-bind:key="temp.id" :value="temp.id">{{ temp.name }}</Option>
            </Select>
          </template>
          <template slot-scope="{ row }" slot="zhichuMoney">
            <Input v-model="row.zhichuMoney"></Input>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" style="margin-right: 5px" @click="addzhichu(row, index)">确定</Button>
            <Button type="error" @click="deleteZhiChu(row, index)">删除</Button>
          </template>
        </Table>
      </Form>
    </Modal>
  </div>
</template>
<script>
import zilinengli from '../data/zilinengli.json'
import laodongnengli from '../data/laodongnengli.json'
import shenghuozilinengli from '../data/shenghuozilinengli.json'
import minzu from '../data/minzu.json'
import guanxi from '../data/guanxi.json'
import renyuanleibie from '../data/renyuanleibie.json'
import canjileixing from '../data/canjileixing.json'
import canjidengji from '../data/canjidengji.json'
import shouruleixing from '../data/shouruleixing.json'
import zhuchuleixing from '../data/zhichuleixing.json'
export default {
  props: {
    paramsData: Object
  },
  data () {
    return {
      zhuchuleixing: zhuchuleixing,
      shouruleixing: shouruleixing,
      canjidengji: canjidengji,
      canjileixing: canjileixing,
      zilinengli: zilinengli,
      laodongnengli: laodongnengli,
      shenghuozilinengli: shenghuozilinengli,
      minzu: minzu,
      renyuanleibie: renyuanleibie,
      guanxi: guanxi,
      familyModal: false,
      familyInfo: {},
      familyList: [],
      columns: [
        { title: '身份证号', key: 'DF001', minWidth: 150, align: 'center', fixed: 'left' },
        { title: '姓名', key: 'DF002', minWidth: 150, align: 'center', fixed: 'left' },
        { title: '性别', slot: 'DF003', minWidth: 150, align: 'center' },
        { title: '出生日期', key: 'DF004', minWidth: 150, align: 'center' },
        { title: '与申请人关系', slot: 'DF005', minWidth: 150, align: 'center' },
        { title: '人员类别', slot: 'DF006', minWidth: 150, align: 'center' },
        { title: '民族', slot: 'DF007', minWidth: 150, align: 'center' },
        { title: '户籍地址', key: 'DF008', minWidth: 150, align: 'center' },
        { title: '生活自理能力', slot: 'DF009', minWidth: 150, align: 'center' },
        { title: '劳动能力', slot: 'DF010', minWidth: 150, align: 'center' },
        { title: '生活自理能力类型', slot: 'DF011', minWidth: 150, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 200, align: 'center', fixed: 'right' }
      ],
      canjiList: [],
      shouruList: [],
      zhichuList: [],
      canjicolumns: [
        { title: '残疾类型', slot: 'canjiState', minWidth: 150, align: 'center' },
        { title: '残疾等级', slot: 'canjiLevel', minWidth: 150, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 150, align: 'center' }
      ],
      shourucolumns: [
        { title: '收入类型', slot: 'shouruState', minWidth: 150, align: 'center' },
        { title: '月收入金额', slot: 'shouruMoney', minWidth: 150, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 150, align: 'center' }
      ],
      zhichucolumns: [
        { title: '支出类型', slot: 'zhichuState', minWidth: 150, align: 'center' },
        { title: '月支出金额', slot: 'zhichuMoney', minWidth: 150, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 150, align: 'center' }
      ]
    }
  },
  methods: {
    addFamily () {
      this.updateState = false
      this.familyInfo = {}
      this.canjiList = []
      this.shouruList = []
      this.zhichuList = []
      this.familyModal = true
    },
    addFamilyOk () {
      let that = this
      if (!this.familyInfo.DF003) {
        this.$Notice.error({ title: '身份证校验不合规', desc: '' })
        return
      }
      let DF013 = ''
      let DF014 = ''
      let DF015 = ''
      if (that.canjiList.length > 0) {
        that.canjiList.forEach(function (item) {
          if (item.canjiState && item.canjiLevel) {
            if (DF013) {
              DF013 = DF013 + ',' + item.canjiState + '#' + item.canjiLevel
            } else {
              DF013 = item.canjiState + '#' + item.canjiLevel
            }
          }
        })
      }
      if (that.shouruList.length > 0) {
        that.shouruList.forEach(function (item) {
          if (item.shouruState && item.shouruMoney) {
            if (DF014) {
              DF014 = DF014 + ',' + item.shouruState + '#' + item.shouruMoney
            } else {
              DF014 = item.shouruState + '#' + item.shouruMoney
            }
          }
        })
      }
      if (that.zhichuList.length > 0) {
        that.zhichuList.forEach(function (item) {
          if (item.zhichuState && item.zhichuMoney) {
            if (DF015) {
              DF015 = DF015 + ',' + item.zhichuState + '#' + item.zhichuMoney
            } else {
              DF015 = item.zhichuState + '#' + item.zhichuMoney
            }
          }
        })
      }
      if (this.updateState) {
        that.familyInfo.DF013 = DF013
        that.familyInfo.DF014 = DF014
        that.familyInfo.DF015 = DF015
        that.familyInfo.canjiList = that.canjiList
        that.familyInfo.shouruList = that.shouruList
        that.familyInfo.zhichuList = that.zhichuList
        let id = this.updateid
        that.familyList[id] = that.familyInfo
      } else {
        that.familyInfo.DF013 = DF013
        that.familyInfo.DF014 = DF014
        that.familyInfo.DF015 = DF015
        that.familyInfo.canjiList = that.canjiList
        that.familyInfo.shouruList = that.shouruList
        that.familyInfo.zhichuList = that.zhichuList
        that.familyList.push(that.familyInfo)
      }
    },
    updateFamily (item, id) {
      this.updateState = true
      this.updateid = id
      this.zhichuList = item.zhichuList
      this.shouruList = item.shouruList
      this.canjiList = item.canjiList
      this.familyInfo = item
      this.familyModal = true
    },
    deleteFamily (item) {
      console.log(item, i)
      let arr = []
      let that = this
      that.familyList.forEach(function (temp, index) {
        console.log(temp, index)
        if (index !== i) {
          arr.push(temp)
        }
      })
      that.familyList = arr
    },
    checkCardno (no) {
      if (no.length === 18) {
        let id = no
        let flag = true
        // 转换大小写
        id = id.toUpperCase()
        let arrVerifyCode = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
        let Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // let Checker = [1, 9, 8, 7, 6, 5, 4, 3, 2, 1, 1]
        if (id.length !== 15 && id.length !== 18) {
          flag = false
        }
        let Ai = id.length === 18 ? id.substring(0, 17) : id.slice(0, 6) + '19' + id.slice(6, 16)
        if (!/^\d+$/.test(Ai)) {
          flag = false
        }
        let yyyy = Ai.slice(6, 10)
        let mm = Ai.slice(10, 12) - 1
        let dd = Ai.slice(12, 14)
        let d = new Date(yyyy, mm, dd)
        let now = new Date()
        console.log(now)
        let year = d.getFullYear()
        let mon = d.getMonth() + 1
        let day = d.getDate()

        // if (year !== yyyy || mon !== mm || day !== dd || d > now || year < 1800) {
        //   flag = false
        // }
        let ret = 0
        for (let i = 0; i < 17; i++) {
          ret += Ai.charAt(i) * Wi[i]
        }
        Ai += arrVerifyCode[(ret %= 11)]
        if (id.length === 18 && id !== Ai) {
          flag = false
        }
        console.log(flag)
        if (flag) {
          this.familyInfo.DF004 = year + '-' + mon + '-' + day
          let num = no.charAt(16)
          if (num % 2 === 0) {
            this.familyInfo.DF003 = '10301002'
          } else {
            this.familyInfo.DF003 = '10301001'
            console.log('男')
          }
        } else {
          this.familyInfo.DF003 = ''
        }
      }
    },
    addCanjiList () {
      this.canjiList.push({})
      console.log(this.canjiList.length)
    },
    addCanji (item, index) {
      console.log(index)
      if (!item.canjiState) {
        this.$Notice.error({ title: '请填写残疾类型', desc: '' })
        return
      }
      if (!item.canjiLevel) {
        this.$Notice.error({ title: '请填写残疾等级', desc: '' })
        return
      }
      this.canjiList[index] = item
      this.$Notice.success({ title: '添加成功', desc: '' })
    },
    deleteCanji (item, i) {
      console.log(item, i)
      let arr = []
      let that = this
      that.canjiList.forEach(function (temp, index) {
        console.log(temp, index)
        if (index !== i) {
          arr.push(temp)
        }
      })
      that.canjiList = arr
    },
    addShouruList () {
      this.shouruList.push({})
    },
    addShouru (item, index) {
      console.log(index)
      if (!item.shouruState) {
        this.$Notice.error({ title: '请填写收入类型', desc: '' })
        return
      }
      if (!item.shouruMoney) {
        this.$Notice.error({ title: '请填写残疾等级', desc: '' })
        return
      }
      this.shouruList[index] = item
      this.$Notice.success({ title: '添加成功', desc: '' })
    },
    deleteShouru (item, i) {
      console.log(item, i)
      let arr = []
      let that = this
      that.shouruList.forEach(function (temp, index) {
        console.log(temp, index)
        if (index !== i) {
          arr.push(temp)
        }
      })
      that.shouruList = arr
    },
    addZhichuList () {
      this.zhichuList.push({})
    },
    addzhichu (item, index) {
      console.log(index)
      if (!item.zhichuState) {
        this.$Notice.error({ title: '请填写收入类型', desc: '' })
        return
      }
      if (!item.zhichuMoney) {
        this.$Notice.error({ title: '请填写支出金额', desc: '' })
        return
      }
      this.zhichuList[index] = item
      this.$Notice.success({ title: '添加成功', desc: '' })
    },
    deleteZhiChu (item, i) {
      console.log(item, i)
      let arr = []
      let that = this
      that.zhichuList.forEach(function (temp, index) {
        console.log(temp, index)
        if (index !== i) {
          arr.push(temp)
        }
      })
      that.zhichuList = arr
    },
    updateParams () {
      console.log(this.paramsData)
      if (this.paramsData.code) {
        let paramData = this.paramsData.paramData
        this.$nextTick(() => {
          this.familyList = paramData.familyList
          this.canjiList = paramData.canjiList
          this.shouruList = paramData.shouruList
          this.zhichuList = paramData.zhichuList
        })
      }
    }
  },
  mounted () {
  },
  watch: {
    paramsData: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          this.paramsData = newVal
          this.updateParams()
        })
      }
    }
  }
}
</script>
<style></style>
